<template>
  <div>
    <h1>会员列表</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>权益</td>
          <td>
            <input type="text" v-model="data.dquan" />
          </td>
          <td>等级名称</td>
          <td>
            <select v-model="data.dname">
              <option value="">请选择</option>
              <option value="青铜会员">青铜会员</option>
              <option value="白银会员">白银会员</option>
              <option value="黄金会员">黄金会员</option>
              <option value="铂金会员">铂金会员</option>
              <option value="钻石会员">钻石会员</option>
              <option value="至尊会员">至尊会员</option>
            </select>
          </td>
          <td>
            <input type="button" value="查询" @click="list" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>序号</td>
          <td>名称</td>
          <td>权益</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list">
          <td>{{ a.did }}</td>
          <td>{{ a.dname }}</td>
          <td>{{ a.dquan }}</td>
          <td>
            <span v-if="a.dtype == 1">启用</span>
            <span v-if="a.dtype == 0">禁用</span>
          </td>
          <td>
            <input type="button" value="修改状态" @click="del(a.did)" />
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>总条数:{{ info.count }}</td>
          <td>总页数:{{ info.totalpage }}</td>
          <td>当前页:{{ data.pageindex }}</td>
          <td v-for="b in info.totalpage">
            <span>{{ b }}</span>
          </td>
          <td><input type="button" value="首页" @click="page(1)" /></td>
          <td>
            <input
              type="button"
              value="上一页"
              @click="page(data.pageindex - 1)"
            />
          </td>
          <td>
            <input
              type="button"
              value="下一页"
              @click="page(data.pageindex + 1)"
            />
          </td>
          <td>
            <input type="button" value="尾页" @click="page(info.totalpage)" />
          </td>
          <td>
            页容量:
            <select v-model="data.pagesize" @change="list">
              <option :value="2">2</option>
              <option :value="3">3</option>
              <option :value="4">4</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
onMounted(() => {
  list();
});
let data: any = reactive({
  dname: "",
  dquan: "",
  pageindex: 1,
  pagesize: 2,
});
let info: any = reactive({
  count: 0,
  list: [],
  totalpage: 0,
});
const page = (e: any) => {
  if (e <= 0) {
    data.pageindex = 1;
  } else if (e >= info.totalpage) {
    data.pageindex = info.totalpage;
  } else {
    data.pageindex = e;
  }

  list();
};
const del = (did: any) => {
  axios({
    url: "/api/User/Uptype",
    method: "get",
    params: { did: did },
  }).then((res) => {
    console.log(res);
    if (res.data > 0) {
      alert("修改成功");
      list();
      return;
    } else {
      alert("修改失败");
      return;
    }
  });
};
const list = () => {
  axios({
    url: "/api/User/GetDeng",
    method: "get",
    params: data,
  }).then((res) => {
    console.log(res);
    Object.assign(info, res.data);
  });
};
</script>

<style scoped></style>
